<template>
  <div class="purchase">
    <div class="purchaseone">
      <van-icon name="arrow-left" style="font-size: 20px" @click="clickleft" />
      <div class="purchaseone1">
        <router-link to="/detail"><span>商品</span></router-link>
        <router-link to="/detail"><span>评价</span></router-link>
        <router-link to="/detail"><span>详情</span></router-link>
      </div>
    </div>
    <div class="purchasetwo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="pink">
        <van-swipe-item>
          <img :src="images.img1" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="images.img2" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="images.img3" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="images.img4" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="purchasefour3">
        {{ images.proname }}
      </div>
      <div class="purchasefour4">
        {{ images.proname }}
      </div>
    </div>
    <div class="purchasethree">
      <span>￥380.00</span>
      <span>预估到手￥270.50></span>
    </div>
    <div class="purchasefour">
      <div class="purchasefour1">
        <span>9.5折</span>
        <span>优惠></span>
      </div>
      <div class="purchasefour2">
        购买派发积分，不参与生日积分权益（2倍封顶）
      </div>

    </div>
    <div class="purchasefive">
      <div class="purchasefive1">
        <span>促销</span>
        <span>9.5折</span>
        <span>指定商品专享9.5折</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="purchasesix">
      <div class="purchasesix1">
        <span>积分</span>
        <span>赠送中免积分,可使用积分抵扣</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="purchasesix">
      <div class="purchasesix1">
        <span>说明</span>
        <span>支持7天无理由退货</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="purchasesix">
      <div class="purchasesix1">
        <span>限购</span>
        <span>商品限购2件</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="zi">
      提货方式
    </div>
    <div class="purchasesix">
      <div class="purchasesix1">
        <span>1.离岛在家</span>
        <span>三亚</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="purchaseseven">
      <span>精选评价（0）</span>
      <p>-本商品暂未收录记录-</p>
    </div>
    <div class="purchaseeight">
      <img src="https://pic.cdfgsanya.com/assets/upload/brandlogo/61cf7271c9fd82fa00e5b84d5ab7caee.jpg" alt="">
    </div>

    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import service from '../../../utils/service'
export default {
  data() {
    return {
      images: [],
    };
  },
  mounted() {
    console.log(this.$route.query.proid);
    service({
      url: 'http://118.178.238.19:3001/api/pro/detail/' + this.$route.query.proid,
      method: 'get',

    }).then(res => {

      this.images = res.data.data
      console.log(this.images)
    })
  },
  methods: {
    clickleft() {
      this.$router.push('/saihong')
    }
  }
}
</script>

<style scoped>
.purchase {
  background-color: beige;
  position: relative;
}

.purchaseone {
  display: flex;
  width: 100%;
  height: 50px;
  background-color: white;
  align-items: center;
  position: fixed;
  z-index: 999;
}

.purchaseone1 {
  width: 80%;
  display: flex;
  justify-content: space-around;
  margin-left: 20px;
  font-size: 14px;
  position: fixed;
}

.purchasetwo {
  margin-bottom: 15px;
  width: 100%;
  height: 400px;
}

.purchasetwo img {
  width: 100%;
  height: 410px;
}

.purchasethree {
  height: 70px;
  background-color: red;
  border-radius: 10px 10px 0 0;
  line-height: 60px;
  margin: 0 10px;
}

.purchasethree>span:nth-child(1) {
  color: white;
  font-size: 20px;
  margin-left: 10px;
}

.purchasethree>span:nth-child(2) {
  font-size: 12px;
  width: 136px;
  background-color: white;
  height: 20px;
  border-radius: 5px 10px 10px 0;
  color: red;
  margin-left: 10px;
}

.purchasefour {
  height: 140px;
  background-color: white;
  border-radius: 10px;
  margin: -12px 10px;
  padding: 15px;
}

.purchasefour1 {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.purchasefour1>span:nth-child(1) {
  color: red;
  background-color: pink;
  border-radius: 2px;
  width: 35px;
  text-align: center;
}

.purchasefour1>span:nth-child(2) {
  color: white;
  background-color: red;
  width: 40px;
  text-align: center;
  border-radius: 8px;
}

.purchasefour2 {
  font-size: 12px;
  background-color: pink;
  color: white;
  width: 280px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  border-radius: 5px;
  margin-top: 10px;
}

.purchasefour3 {
  padding: 130px 20px 0 20px;
}

.purchasefour4 {
  font-size: 12px;
  color: gray;
  padding: 20px;
}

.purchasefive {
  height: 50px;
  background-color: white;
  margin-top: 135px;
  margin: 20px 10px 0;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px;
}

.purchasefive1 {
  font-size: 12px;
  width: 170px;
  display: flex;
  justify-content: space-between;
}

.purchasefive1>span:nth-child(1) {
  font-weight: 700;
}

.purchasefive1>span:nth-child(2) {
  color: red;
}

.purchasesix {
  height: 50px;
  background-color: white;
  margin: 10px 10px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px;
}

.purchasesix1 {
  font-size: 12px;
  width: 200px;
  display: flex;
}

.purchasesix1>span:nth-child(1) {
  font-weight: 700;
  margin-right: 10px;
}

.purchase>.zi {
  margin-left: 13px;
  margin-top: 10px;
  font-size: 14px;
}

.purchaseseven {
  height: 100px;
  background-color: white;
  border-radius: 10px;
  margin: 10px 10px;
  padding: 10px;
  box-sizing: border-box;
}

.purchaseseven>span {
  font-size: 14px;
}

.purchaseseven>p {
  font-size: 12px;
  color: gray;
  text-align: center;
}

.purchaseeight {
  height: 100px;
  background-color: white;
  border-radius: 10px;
  margin: 10px 10px;
  padding: 10px;
  box-sizing: border-box;
}

.purchaseeight>img {
  width: 30%;
}

router-link-exact-active {
  background-color: red;
}
</style>